<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
<link rel="stylesheet" href="../css/my.css" />
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>

</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<h2 class="text-center">人脸识别</h2>
			</div>
		</div>
		<div style="text-align: center" class="row-fluid">
			<h3 class="text">人脸识别-年龄鉴定</h3>
			<form id="formup" name="formup">
				<div id="localImag">
					<img id="preview" width=-1 height=-1 style="diplay: none" />
				</div>
				<div class="uploader blue">
					<input type="text" class="filename" readonly="readonly" /> <input
						type="button" class="button" value="选择..." /> <input id="doc"
						onchange="showImage();" name="myfiles" type="file" size="30" />
				</div>

				<input type="button"
					style="width: 60px; height: 32px; margin-top: -44px; margin-left: 10px;"
					class="btn btn-warning" onclick="submitBtn();" value="提交" />

			</form>
			<label>经检测， 您是<span id='age'> </span> 岁
			</label>
		</div>
	</div>
	<script type="text/javascript"
		src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.from.js"></script>
	<script src="../js/wechat.js"></script>
	<script type="text/javascript">
		function showImage() {
			var docObj = document.getElementById("doc");
			var imgObjPreview = document.getElementById("preview");
			var IW = imgObjPreview.offsetWidth;
			var IH = imgObjPreview.offsetHeight;
			var BOX = document.getElementById("localImag");
			var BW = BOX.offsetWidth;
			var BH = BOX.offsetHeight;
			if (docObj.files && docObj.files[0]) {
				// 火狐下，直接设img属性
				imgObjPreview.style.display = 'block';
				imgObjPreview.style.width = '20%';
				imgObjPreview.style.height = '20%';
				imgObjPreview.style.marginLeft = (BW - IW) / 2 + "px";
				imgObjPreview.style.marginTop = (BH - IH) / 2 + "px";
				// imgObjPreview.src = docObj.files[0].getAsDataURL();
				// 火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
				imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
			} else {
				// IE下，使用滤镜
				docObj.select();
				var imgSrc = document.selection.createRange().text;
				var localImagId = document.getElementById("localImag");
				// 必须设置初始大小
				localImagId.style.width = "250px";
				localImagId.style.height = "200px";
				// 图片异常的捕捉，防止用户修改后缀来伪造图片
				try {
					localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
					localImagId.filters
							.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
				} catch (e) {
					alert("您上传的图片格式不正确，请重新选择!");
					return false;
				}
				imgObjPreview.style.display = 'none';
				document.selection.empty();
			}
			return true;
		};
	</script>

	<script type="text/javascript">
		function submitBtn() {
			$('#formup').ajaxSubmit({
				type : 'POST',
				url : '/wechat/aliyun/faceAge',
				success : function(data, status) {
					var status = status;
					if (status.toString() == "success") {
						alert("成功");
						$("#age").text(data);
					} else {
						alert("no success");
					}
				},
				error : function() {
					alert("失败")
				}
			})
		}
	</script>
	<script>
		$(function() {
			$("input[type=file]").change(
					function() {
						$(this).parents(".uploader").find(".filename").val(
								$(this).val());
					});
			$("input[type=file]").each(
					function() {
						if ($(this).val() == "") {
							$(this).parents(".uploader").find(".filename").val(
									"No file selected...");
						}
					});
		});
	</script>

</body>
</html>